import { pageRecord } from '@/services/api/api-instruct-record';
import { parse } from '@/utils/historyUtils';
import { BarsOutlined,DatabaseOutlined,FileSyncOutlined } from '@ant-design/icons';
import { DrawerForm,PageContainer } from '@ant-design/pro-components';
import { ProFormInstance } from '@ant-design/pro-form';
import ProList from '@ant-design/pro-list';
import { ActionType } from '@ant-design/pro-table';
import { Badge,Menu } from 'antd';
import React,{ useEffect,useRef,useState } from 'react';
import { useAccess } from 'umi';
import TreeAddress from '../address/TreeAddress';
import AddRecord from '../record/AddRecord';
import DetailsRecord from '../record/DetailsRecord';
import './TableInstruct.less';

const TableInstruct: React.FC = () => {
  const access = useAccess();
  const [tabActiveKey, setTabActiveKeyState] = useState<string>('all');
  const [menuVisible,setMenuVisible]=useState(false)
  const actionRef = useRef<ActionType>();
  const formRef = useRef<ProFormInstance>();
  const renderBadge = (count: number, active = false) => {
    return (
      <Badge
        count={count}
        style={{
          marginBlockStart: -2,
          marginInlineStart: 4,
          color: active ? '#1890FF' : '#999',
          backgroundColor: active ? '#E6F7FF' : '#eee',
        }}
      />
    );
  };
  const [instructId, setInstructIdState] = useState();

  useEffect(() => {
    const { instructId } = parse(location.search) as { instructId: string };

    if (instructId != undefined && instructId != null && instructId != 'null') {
      setInstructIdState(instructId);
    }
  }, []);

  /**
   * 请求网络
   * @param value
   */
  const request = async (params = {}) => {
    if (tabActiveKey) {
      params.tabActiveKey = tabActiveKey;
    }

    const response = await pageRecord(params);
    return Promise.resolve({
      data: response.data.data,
      total: response.data.total,
      success: response.code === 0,
    });
  };

  return (
    <PageContainer
      header={{
        title: (
          <div>
            <DrawerForm
              width="200px"
              trigger={<BarsOutlined style={{ fontSize: 20 }} />}
              drawerProps={{
                destroyOnClose: true,
                placement: 'left',
                closable: false,
              }}
              visible={menuVisible}
              onVisibleChange={(visible: boolean) => {
                if (visible) {
                }
                setMenuVisible(visible)
              }}
              submitter={false}
              onFinish={async (values) => {}}
            >
              <Menu
                onSelect={(info: SelectInfo) => {
                  setMenuVisible(!menuVisible)
                  setTabActiveKeyState(info.key);
                  actionRef.current?.reloadAndRest();
                }}
                style={{ width: '100%', height: '100%', borderInlineEnd: 'none' }}
                defaultSelectedKeys={[tabActiveKey]}
                mode="vertical"
                items={
                  access.宣传指令x配置x管理员
                    ? [
                        {
                          label: <span>全部{renderBadge(0, tabActiveKey === 'all')}</span>,
                          key: 'all',
                          icon: <DatabaseOutlined />,
                        },
                        {
                          label: <span>我发布的{renderBadge(0, tabActiveKey === 'my')}</span>,
                          key: 'my',
                          icon: <FileSyncOutlined />,
                        },
                        {
                          label: <span>其他发布{renderBadge(0, tabActiveKey === 'other')}</span>,
                          key: 'other',
                          icon: <FileSyncOutlined />,
                        },
                      ]
                    : [
                        {
                          label: <span>全部{renderBadge(0, tabActiveKey === 'all')}</span>,
                          key: 'all',
                          icon: <DatabaseOutlined />,
                        },
                        {
                          label: <span>进行中{renderBadge(0, tabActiveKey === 'progress')}</span>,
                          key: 'progress',
                          icon: <DatabaseOutlined />,
                        },
                        {
                          label: <span>已结束{renderBadge(0, tabActiveKey === 'end')}</span>,
                          key: 'end',
                          icon: <DatabaseOutlined />,
                        },
                      ]
                }
              />
            </DrawerForm>
            <span style={{ marginLeft: 10 }}>宣传指令</span>
          </div>
        ),
        style: {
          paddingBlockEnd: 0,
        },
      }}
      extra={
        access.宣传指令x配置x管理员
          ? [
              access.宣传指令x联络人 ? (
                <TreeAddress
                  key={'tree_address'}
                  onSave={() => {
                    actionRef.current?.reload();
                  }}
                />
              ) : (
                <></>
              ),
              access.宣传指令x发布指令x页面 ? (
                <AddRecord
                  key={'save_record'}
                  onSave={() => {
                    actionRef.current?.reload();
                  }}
                />
              ) : (
                <></>
              ),
            ]
          : []
      }
    >
      <ProList<CuesTopicData.TopicPage>
        header={false}
        headerTitle={false}
        ghost={true}
        pagination={{
          defaultPageSize: 8,
          showSizeChanger: false,
          showTotal: false,
          style: { textAlign: 'center' },
        }}
        style={{ marginTop: 10 }}
        actionRef={actionRef}
        request={request}
        showActions="hover"
        grid={{ gutter: 18, column: 1 }}
        onItem={(record: any) => {
          return {
            onMouseEnter: () => {},
            onClick: () => {},
          };
        }}
        renderItem={(item: CuesTopicData.TopicPage, index: number) => {
          return (
            <DetailsRecord
              item={item}
              onClose={() => {
                actionRef.current?.reload();
              }}
              triggerMode="card"
              title={item.name}
              instructId={instructId}
            />
          );
        }}
        rowKey={'id'}
        toolBarRender={false}
      />
    </PageContainer>
  );
};

export default TableInstruct;
